<template>
	<view class="site">
		<view class="inp">
			<view class="inp1">
				
				<view class="item">
					<view class="item-name">收件人：</view>
					<input type="text" placeholder="请填写收件人的姓名" v-model="sitelist.name">
				</view><view class="item">
					<view class="item-name">手机号码：</view>
					<input type="number"  placeholder="请填写手机号码" v-model="sitelist.num">
				</view><view class="item">
					<view class="item-name">所在地区：</view>
					<view class="sites" :style=" sitelist.site==='请选择地址>'? '':'color: #182c42;'">
						<AddressPicker @change="change" :level="3">{{sitelist.site}}</AddressPicker>
					</view>
				</view><view class="item">
					<view class="item-name" @tap="map">详细地址：</view>
					<input type="text" placeholder="街道,小区,门牌号" v-model="sitelist.value">
				</view>
				
			
			</view>
		</view>
		<view class="item-switch">
			<view class="item-name">设置为默认：</view>
			<switch :checked="sitelist.select" color="#00c783" @change="changer" style="transform:scale(0.7)"/>
		</view>
		<view class="but" @tap="Setsite">保存</view>
	</view>
</template>

<script>
	import AddressPicker from "@/components/lingdang-AddressPicker/AddressPicker.vue"
	import { mapState,mapActions} from "vuex"
	export default {
		data() {
			return {
				sitelist:{
					id:'',
					name:'',
					num:"",
					site:"请选择地址>",
					value:"",
					select:true
				}
			};
		},
		onLoad(e) {
			// console.log(e);
			if(JSON.stringify(e) === "{}") return
			this.sitelist= JSON.parse(e.data)
		},
		components:{
			AddressPicker
		},
		computed:{
			...mapState({
				list:state=>state.site.list
			})
			
		},
		methods:{
			...mapActions(['setsite']),
			map(){
				uni.chooseLocation({
					success:(res)=> {
						console.log(res);
						this.sitelist.value =res.address+',' + res.name
						// this.sitelist.name= res.
					}
				});
			},
			unitext(value){
				uni.showToast({
				   title: value,
				   icon:'none',
				   duration: 2000
				})
			},
			change(index){
				let newarr = ''
			index.data.forEach(v=>{
				if(newarr===v.name) return
				newarr += v.name
			})
				this.$set(this.sitelist,'site',newarr)
			},
			changer(index){
				this.$set(this.sitelist,'select',index.detail.value)
			},
			Setsite(){
				if(this.sitelist.name.length===0) return this.unitext("请填写正确的姓名")
				if(this.sitelist.num.length!==11) return this.unitext("请填写正确的手机号")
				if(this.sitelist.site==="请选择地址>") return this.unitext("请选择您所在的地址")
				if(!this.sitelist.value) return this.unitext("请填写详细的地址")
				this.setsite(this.sitelist)
				this.unitext("保存成功")
				uni.navigateBack({ delta: 1 })
			}
		}
	}
</script>

<style lang="less" scoped>
.site{
	display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		min-height: 100vh;
		background-color: #f5f5f5;
	.inp{
		display: flex;
		justify-content: center;
		// align-items: center;
	    width: 710rpx;
		height: 330rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		background-color: #fff;
	}
}	
.inp1{
    width: 670rpx;
	height: 330rpx;	
	// background-color: aqua;
	}
.item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 670rpx;
	height: 82rpx;
	border-bottom: 1rpx  solid #f5f5f5;
	 .item-name{
		 font-size: 28rpx;
		 font-weight: 400;
	 }
	 input{
		width: 440rpx;
		font-size: 26rpx;
	 }
	 .sites{
		 width: 440rpx;
		 font-size: 26rpx;
		 color: #808080;
	 }
}
.item-switch{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
	border-radius: 10rpx;
	width: 710rpx;
	height: 80rpx;
	background-color: #fff;
	.item-name{
		margin-left: 20rpx;
		font-size: 28rpx;
		font-weight: 400;
	}
}
.but{
	width: 710rpx;
	height: 80rpx;
	color: #fff;
	border-radius: 10rpx;
	text-align: center;
	line-height: 80rpx;
	margin-top: 200rpx;
	background-color: #00c783;
}
</style>
